// From: zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richtext.md (line 19)
// ==================================================
  <meta name="viewport" content="width=device-width">
  

// From: zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richtext.md (line 203)
// ==================================================
   <!-- index.html -->
   <!DOCTYPE html>
   <html>
       <body>
           <p>Hello World</p>
       </body>
   </html>
   

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebMessagePort.md (line 402)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html lang="en-gb">
<head>
    <title>WebView MessagePort Demo</title>
</head>

<body>
<h1>Html5 Send and Receive Message</h1>
<h3 id="msg">Receive string:</h3>
<h3 id="msg2">Receive arraybuffer:</h3>
<div style="font-size: 10pt; text-align: center;">
    <input type="button" value="Send String" onclick="postStringToApp();" /><br/>
</div>
</body>
<script src="index.js"></script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebStorage.md (line 81)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript">

        // 打开或创建数据库
        var request = indexedDB.open('myDatabase', 1);

        // 如果数据库版本变化或首次创建时触发
        request.onupgradeneeded = function(event) {
            var db = event.target.result;

            // 创建对象存储（表），设置主键为‘id’
            var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

            // 为‘name’创建索引
            objectStore.createIndex('name', 'name', { unique: false });
        };

        // 打开数据库成功时的回调
        request.onsuccess = function(event) {
            var db = event.target.result;

            const customerData = [
                {id: 1, name: 'John Doe', email: 'john@example.com'},
                {id: 2, name: 'John Doe', email: 'john@example.com'},
            ]

            // 插入数据
            var transaction = db.transaction('customers', 'readwrite');
            var objectStore = transaction.objectStore('customers');

            customerData.forEach((customer) => {
                objectStore.add(customer);
            });

            transaction.oncomplete = function () {
                console.info('Transaction completed: data added');
            }
            
            transaction.onerror = function (event) {
                console.error("Transaction failed", event);
            }
            
            // 查询数据
            var queryTransaction = db.transaction(['customers']);
            var queryObjectStore = queryTransaction.objectStore('customers');
            var query = queryObjectStore.get(2);
            
            query.onsuccess = function (event) {
                console.info('query succ');
                console.info('Customer:', event.target.result);
                console.info('Customer id:', event.target.result.id);
                console.info('Customer name:', event.target.result.name);
                console.info('Customer email:', event.target.result.email);
            };
            
            queryObjectStore.openCursor().onsuccess = (event) => {
                const cursor = event.target.result;
                if (cursor) {
                    var msg = "<p>查询记录：" + cursor.key + "</p>";
                    document.querySelector("#status").innerHTML += msg;
                    var msg = "<p><b>" + cursor.value.name + "</b></p>";
                    document.querySelector("#status").innerHTML += msg;
                    console.info(`SSN ${cursor.key} 对应的名字是 ${cursor.value.name}`);
                    cursor.continue();
                } else {
                    console.info("没有更多记录了")
                }
            }
        };

        // 错误处理
        request.onerror = function(event) {
            console.error('Database error:', event.target.error);
        };

      </script>
  </head>
  <body>
  <div id="status" name="status">状态信息</div>
  </body>
  </html>
 

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 105)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <button type="button" onclick="htmlTest()">Click Me!</button>
      <p id="demo"></p>
      <p id="webDemo"></p>
      <script type="text/javascript">
        function htmlTest() {
          // This function call expects to return "Web test"
          let webStr = objTestName.webTest();
          document.getElementById("webDemo").innerHTML=webStr;
          console.info('objTestName.webTest result:'+ webStr)
        }
      </script>
    </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 400)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>

<script>
	function loadContent() {
	  var hash = window.location.hash;
	  var contentDiv = document.getElementById('content');

	  if (hash === '#home') {
		contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
	  } else {
		contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>';
	  }
	}

	// 加载界面
	window.addEventListener('load', loadContent);

	// 当hash变化时，更新界面
	window.addEventListener('hashchange', loadContent);
</script>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 432)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1229)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <button type="button" onclick="htmlTest()">Click Me!</button>
      <p id="demo"></p>
      <p id="webDemo"></p>
      <p id="asyncDemo"></p>
      <script type="text/javascript">
        function htmlTest() {
          // This function call expects to return "ArkUI Web Component"
          let str=objName.test("webtest data");
          objName.testNumber(1);
          objName.asyncTestBool(true);
          document.getElementById("demo").innerHTML=str;
          console.info('objName.test result:'+ str)

          // This function call expects to return "Web test"
          let webStr = objTestName.webTest();
          document.getElementById("webDemo").innerHTML=webStr;
          console.info('objTestName.webTest result:'+ webStr)

          objAsyncName.asyncTest();
          objAsyncName.asyncString("async test data");
        }
      </script>
    </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1340)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Hello world!
    <script type="text/javascript">
      function test() {
        console.info('Ark WebComponent')
        return "This value is from index.html"
      }
    </script>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1434)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Hello world!
    <script type="text/javascript">
      function test() {
        console.info('Ark WebComponent')
        return "This value is from index.html"
      }
    </script>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1663)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-gb">
<body>
<h1>run JavaScript Ext demo</h1>
</body>
<script type="text/javascript">
function test() {
  return "hello, world";
}
</script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1880)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-gb">
<body>
<h1>run JavaScript Ext demo</h1>
</body>
<script type="text/javascript">
function test() {
  return "hello, world";
}
</script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 1979)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <button type="button" onclick="htmlTest()">Click Me!</button>
      <p id="demo"></p>
      <script type="text/javascript">
        function htmlTest() {
          let str=objName.test();
          document.getElementById("demo").innerHTML=str;
          console.info('objName.test result:'+ str)
        }
      </script>
    </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 2113)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World Highlight Hello World</p>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 2443)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Message Port Demo</title>
</head>

  <body>
    <h1>WebView Message Port Demo</h1>
    <div>
        <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
        <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
    </div>
    <p class="output">display received message send from ets</p>
  </body>
  <script src="xxx.js"></script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3218)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:2000px;
            height:2000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3306)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:2000px;
            height:2000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3394)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:2000px;
            height:2000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3468)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:3000px;
            height:3000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3646)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<h1>online 属性</h1>
<p id="demo"></p>
<button onclick="func()">click</button>
<script>
    // 检测浏览器是否在线。
    var online1 = navigator.onLine;
    document.getElementById("demo").innerHTML = "浏览器在线：" + online1;

    function func(){
      var online2 = navigator.onLine;
      document.getElementById("demo").innerHTML = "浏览器在线：" + online2;
    }
</script>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 3939)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .blue {
          background-color: lightblue;
        }
        .green {
          background-color: lightgreen;
        }
        .blue, .green {
         font-size:16px;
         height:200px;
         text-align: center;       /* 水平居中 */
         line-height: 200px;       /* 垂直居中（值等于容器高度） */
        }
    </style>
</head>
<body>
<div class="blue" >webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 4025)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .blue {
          background-color: lightblue;
        }
        .green {
          background-color: lightgreen;
        }
        .blue, .green {
         font-size:16px;
         height:200px;
         text-align: center;       /* 水平居中 */
         line-height: 200px;       /* 垂直居中（值等于容器高度） */
        }
    </style>
</head>
<body>
<div class="blue" >webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 6709)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <button type="button" onclick="htmlTest()">Click Me!</button>
      <p id="demo"></p>
      <p id="webDemo"></p>
      <script type="text/javascript">
        function htmlTest() {
          // This function call expects to return "ArkUI Web Component"
          let str=objName.test("webtest data");
          objName.testNumber(1);
          objName.testBool(true);
          document.getElementById("demo").innerHTML=str;
          console.info('objName.test result:'+ str)

          // This function call expects to return "Web test"
          let webStr = objTestName.webTest();
          document.getElementById("webDemo").innerHTML=webStr;
          console.info('objTestName.webTest result:'+ webStr)
        }
      </script>
    </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 6780)
// ==================================================
<!DOCTYPE html>
<html>
    <body>
        <button style="width:300px;height:150px;font-size:50px" onclick="startTimer()">start</button>
        <button style="width:300px;height:150px;font-size:50px" onclick="resetTimer()">reset</button>
        <input style="width:300px;height:150px;font-size:50px" value="0" id="show_num">
    </body>
</html>
<script>
    var timer = null;
    var num = 0;

    function startTimer() {
        timer = setInterval(function() {
            document.getElementById("show_num").value = ++num;
        }, 1000);
    }
    
    function resetTimer() {
        clearInterval(timer);
        document.getElementById("show_num").value = 0;
        num = 0;
    }
</script>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 6852)
// ==================================================
<!DOCTYPE html>
<html>
    <body>
        <button style="width:300px;height:150px;font-size:50px" onclick="startTimer()">start</button>
        <button style="width:300px;height:150px;font-size:50px" onclick="resetTimer()">reset</button>
        <input style="width:300px;height:150px;font-size:50px" value="0" id="show_num">
    </body>
</html>
<script>
    var timer = null;
    var num = 0;

    function startTimer() {
        timer = setInterval(function() {
            document.getElementById("show_num").value = ++num;
        }, 1000);
    }

    function resetTimer() {
        clearInterval(timer);
        document.getElementById("show_num").value = 0;
        num = 0;
    }
</script>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 7378)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <video id="video" width="400px" height="400px" autoplay>
    </video>
    <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()" />
    <script>
      function getMedia() {
        let constraints = {
          video: {
            width: 500,
            height: 500
          },
          audio: true
        }
        let video = document.getElementById("video");
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function(mediaStream) {
          video.srcObject = mediaStream;
          video.play();
        })
      }
    </script>
  </body>
</html>
 

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 8280)
// ==================================================
   <!DOCTYPE html>
   <html lang="en">
   <head></head>
   <body>
     <img src="https://www.example.com/path1/request.png" />
     <img src="https://www.example.com/path2/request.png" />
     <script src="https://www.example.com/example.js" crossorigin="anonymous"></script>
   </body>
   </html>
   

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 8612)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    <script>
        function getFile() {
            var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";
            var xmlHttpReq = new XMLHttpRequest();
            xmlHttpReq.onreadystatechange = function(){
                console.info("readyState:" + xmlHttpReq.readyState);
                console.info("status:" + xmlHttpReq.status);
                if(xmlHttpReq.readyState == 4){
                    if (xmlHttpReq.status == 200) {
                // 如果ets侧正确设置路径列表，则此处能正常获取资源
                        const element = document.getElementById('text');
                        element.textContent = "load " + file + " success";
                    } else {
                // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误
                        const element = document.getElementById('text');
                        element.textContent = "load " + file + " failed";
                    }
                }
            }
            xmlHttpReq.open("GET", file);
            xmlHttpReq.send(null);
        }

    </script>
</head>

<body>
<div class="page">
    <button id="example" onclick="getFile()">stealFile</button>
</div>
<div id="text"></div>
</body>

</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 9044)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0">
      <title>Demo</title>
      <style>
          body {
            width:3000px;
            height:6000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
          }
      </style>
  </head>
  <body>
  Scroll Test
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 9115)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .blue {
          background-color: lightblue;
        }
        .green {
          background-color: lightgreen;
        }
        .blue, .green {
         font-size:16px;
         height:200px;
         text-align: center;       /* 水平居中 */
         line-height: 200px;       /* 垂直居中（值等于容器高度） */
        }
    </style>
</head>
<body>
<div class="blue" >webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-apis-webview-WebviewController.md (line 10185)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
      body {
        width:2560px;
        height:2560px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet;
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 508)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>视频播放页面</title>
  </head>
  <body>
  <h1>视频播放</h1>
  <video id="testVideo" controls autoplay>
      // 需要在video标签中配置autoplay属性，允许视频自动播放
      // 在resources的rawfile目录放置任意一个mp4媒体文件，并将其命名为example.mp4
      <source src="example.mp4" type="video/mp4">
  </video>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 600)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0">
      <title>Demo</title>
      <style>
          body {
            width:3000px;
            height:6000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
          }
      </style>
  </head>
  <body>
  Scroll Test
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 682)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0">
      <title>Demo</title>
      <style>
          body {
            width:3000px;
            height:6000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet;
          }
      </style>
  </head>
  <body>
  Scroll Test
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1467)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div>
    <button type="button" onclick="delayOpenwindow(5000)">delayOpenwindow_5s</button>
</div>

<script>
    function openwindowAll(){
        open("https://www.example.com","_blank","height=400,width=600,top=100,left=100,scrollbars=no")
    }
    function delayOpenwindow(t){
        setTimeout(openwindowAll, t);
    }
</script>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1587)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
      Hello world!
      <div id="result"></div>
  </body>
  <script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = localStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support localStorage.';
      }
    }
  </script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1664)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;">
Hello world!
<div id="result">test msg</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1735)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
      Hello world!
      <div id="result"></div>
  </body>
  <script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = localStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support localStorage.';
      }
    }
  </script>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1812)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;">
Hello world!
<div id="result">test msg</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 1876)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;">
Hello world!
<div id="result">test msg</div>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2033)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .blue {
            background-color: lightblue;
          }
          .green {
            background-color: lightgreen;
          }
          .blue, .green {
          font-size:16px;
          height:200px;
          text-align: center;       /* 水平居中 */
          line-height: 200px;       /* 垂直居中（值等于容器高度） */
          }
      </style>
  </head>
  <body>
  <div class="blue" >webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2176)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Demo</title>
      <style>
        body {
          width:2560px;
          height:2560px;
          padding-right:170px;
          padding-left:170px;
          border:5px solid blueviolet;
        }
      </style>
  </head>
  <body>
  Scroll Test
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2323)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <div>
      <div id="bodyId">
          <object id="nativeButton" type ="native/button" width="300" height="300" style="background-color:red">
          </object>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2379)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>My test html5 page</title>
  </head>
  <body>
      <p>hello world, 你好世界!</p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2431)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p>hello world, 你好世界!</p>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2604)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <input type="text" placeholder="Text">
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2742)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
      <title>测试网页</title>
  </head>
  <body>
    <h1>editMenuOptions Demo</h1>
    <span>edit menu options</span>
    <script>
      document.addEventListener('selectionchange', () => {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
          var selectedText = selection.toString();
          testObjName.setSelectText(selectedText);
        }
      });
  </script>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 2800)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
      <title>测试网页</title>
  </head>
  <body>
    <h1>enableHapticFeedback Demo</h1>
    <span>enable haptic feedback</span>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3054)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长按复制文本</title>
    <style>
        .container {
            background-color: white;
            padding: 30px;
            margin: 20px 0;
        }

        .context {
            line-height: 1.8;
            font-size: 18px;
        }

        .context span {
            border-radius: 8px;
            background-color: #f8f9fa;
        }

        .context a {
            color: #3498db;
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            padding: 12px 24px;
            border: 2px solid #3498db;
            border-radius: 30px;
            display: inline-block;
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .context img {
            max-width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }

        .context:hover img {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
<div class="container">

    <div class="context">
        <!--img.png为html同目录下图片-->
        <img src="img.png">
    </div>

    <div class="context">
        <a  href="https://www.example.com">长按链接唤起菜单</a>
    </div>

    <div class="context">
        <span>在这个数字时代，文本复制功能变得日益重要。无论是引用名言、保存重要信息，还是分享有趣的内容，复制文本都是我们日常操作的一部分。</span>
    </div>

</div>
<br>

<script>
    function copySelectedText() {
        const selectedText = window.getSelection().toString();
        if (selectedText.length > 0) {
            // 使用Clipboard API复制文本
            navigator.clipboard.writeText(selectedText)
                .then(() => {
                    showNotification();
                })
                .catch(err => {
                    console.error('复制失败:', err);
                });
        }
    }
     function clearSelection() {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
    }
</script>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3183)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
      <title>测试网页</title>
  </head>
  <body>
    <h1>blurOnKeyboardHideMode Demo</h1>
    <input type="text" id="input_a">
    <script>
      const inputElement = document.getElementById('input_a');
      inputElement.addEventListener('blur', function() {
        console.info('Input has lost focus');
      });
    </script>
  </body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3315)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>视频播放页面</title>
  </head>
  <body>
      <h1>视频播放</h1>
      <video id="testVideo" controls>
          <!--在resources的rawfile目录中放置任意一个mp4媒体文件，并将其命名为example.mp4-->
          <source src="example.mp4" type="video/mp4">
      </video>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3368)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染固定大小测试html</title>
  </head>
  <body>
  <div>
      <embed id="input" type = "native/view" style = "background-color:red"/>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3437)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>enableDataDetector示例</title>
  </head>
  <body>
      <p> 电话：400-123-4567 </p>
      <p> 邮箱：example@example.com </p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3514)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>dataDetectorConfig示例</title>
  </head>
  <body>
      <p> 电话：400-123-4567 </p>
      <p> 邮箱：12345678901@example.com </p>
      <p> 网址：www.example.com（此项不识别）</p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3575)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>enableSelectedDataDetector示例</title>
  </head>
  <body>
      <p> 电话：400-123-4567 </p>
      <p> 邮箱：example@example.com </p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3624)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <input type="text" placeholder="Text">
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3672)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <p>测试网页</p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3720)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>测试网页</title>
  </head>
  <body>
    <h1>forceEnableZoom Demo</h1>
    <span>You can scale page when forceEnableZoom is true.</span>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 3770)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .blue {
            background-color: lightblue;
          }
          .green {
            background-color: lightgreen;
          }
          .blue, .green {
           font-size:16px;
           height:200px;
           text-align: center;       /* 水平居中 */
           line-height: 200px;       /* 垂直居中（值等于容器高度） */
          }
      </style>
  </head>
  <body>
  <div class="blue" >webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  <div class="green">webArea</div>
  <div class="blue">webArea</div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 4034)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <h1>selectionMenuOptions Demo</h1>
    <span>selection menu options</span>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-attributes.md (line 4084)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试网页</title>
  </head>
  <body>
    <h1>zoomControlAccess Demo</h1>
    <span>You can zoom in/out page when zoomControlAccess is true.</span>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 72)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>WebView onAlert Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <script>
      function myFunction() {
        alert("Hello World");
      }
    </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 157)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body onbeforeunload="return myFunction()">
    <h1>WebView onBeforeUnload Demo</h1>
    <a href="https://www.example.com">Click here</a>
    <script>
      function myFunction() {
        return "onBeforeUnload Event";
      }
    </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 237)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <h1>WebView onConfirm Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        let x;
        let r = confirm("click button!");
        if (r == true) {
          x = "ok";
        } else {
          x = "cancel";
        }
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 360)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <h1>WebView onPrompt Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        let message = prompt("Message info", "Hello World");
        if (message != null && message != "") {
          document.getElementById("demo").innerHTML = message;
        }
      }
    </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 431)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <body>
  <script>
      function myFunction() {
          console.info("onconsole printf");
      }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 1122)
// ==================================================
   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <form id="upload-form" enctype="multipart/form-data">
       <input type="file" id="upload" name="upload" accept="image/*, video/*"/>
       </form>
   </body>
   </html>
   

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 1889)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  <video id="video" width="500px" height="500px" autoplay></video>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <br>
  <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
  <script>
    function getMedia()
    {
      let constraints = {
        video: {width: 500, height: 500},
        audio: true
      };
      // 获取video摄像头区域
      let video = document.getElementById("video");
      // 返回的Promise对象
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      // then()异步，调用MediaStream对象作为参数
      promise.then(function (MediaStream) {
        video.srcObject = MediaStream;
        video.play();
      }).catch(function(error) {
        console.error("Error accessing media devices.", error);
      });
    }
  </script>
  </body>
  </html>
 

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 2093)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html lang="en">
  <body>
    <h1>onContextMenuShow</h1>
    <a href="http://www.example.com" style="font-size:27px">链接www.example.com</a>
    <!-- rawfile下放任意一张图片命名为example.png -->
    <div><img src="example.png"></div>
    <p>选中文字鼠标右键弹出菜单</p>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 2264)
// ==================================================
  <!DOCTYPE html>
  <html>
  <body>
  <p id="locationInfo">位置信息</p>
  <button onclick="getLocation()">获取位置</button>
  <script>
  var locationInfo=document.getElementById("locationInfo");
  function getLocation(){
    if (navigator.geolocation) {
      // 前端页面访问设备地理位置
      navigator.geolocation.getCurrentPosition(showPosition);
    }
  }
  function showPosition(position){
    locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 2484)
// ==================================================
  <!-- window.html页面代码 -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <a href="#" onclick="openNewWindow('https://www.example.com')">打开新页面</a>
  <script type="text/javascript">
      function openNewWindow(url) {
        window.open(url, 'example');
        return false;
      }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 2585)
// ==================================================
  <!-- window.html页面代码 -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ActivateContentEvent</title>
  </head>
  <body>
  <a href="#" onclick="openNewWindow('https://www.example.com')">打开新页面</a>
  <script type="text/javascript">
      function openNewWindow(url) {
        window.open(url, 'example');
        return false;
      }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 2729)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="http://httpbin.org/post" method="post">
      <input type="text" name="username">
      <input type="submit" name="提交">
    </form>
  </body>
  </html>
 

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 3290)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
      <body>
          <p>Hello World</p>
      </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 3600)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试html</title>
      <meta name="viewport">
  </head>
  <body>
  <div>
      <div id="bodyId">
          <embed id="nativeButton" type = "native/button" width="800" height="800" src="test? params1=1" style = "background-color:red"/>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 3760)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试html</title>
      <meta name="viewport">
  </head>
  <body>
  <div>
      <div id="bodyId">
         <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1" style = "background-color:red"/>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 3871)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <h1>onOverrideUrlLoading Demo</h1>
    <a href="about:blank">Click here</a>// 访问about:blank。
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 3930)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="width=device-width,viewport-fit=cover">
    </head>
    <body>
      <div style="position: absolute; bottom: 0; margin-bottom: env(safe-area-inset-bottom)"></div>
    </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 4069)
// ==================================================
  <!-- index.html -->
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    </head>

    <body>

    <p style="font-size:12px">input标签，原有默认行为：</p>
    <input type="text" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key UNSPECIFIED：</p>
    <input type="text" keyboard-return="UNSPECIFIED" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key GO：</p>
    <input type="text" keyboard-return="GO" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEARCH：</p>
    <input type="text" keyboard-return="SEARCH" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key SEND：</p>
    <input type="text" keyboard-return="SEND" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key NEXT：</p>
    <input type="text" keyboard-return="NEXT" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key DONE：</p>
    <input type="text" keyboard-return="DONE" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，系统键盘自定义enterKeyType属性 enter key PREVIOUS：</p>
    <input type="text" keyboard-return="PREVIOUS" style="width: 300px; height: 20px"><br>
    <hr style="height:2px;border-width:0;color:gray;background-color:gray">

    <p style="font-size:12px">input标签，应用自定义键盘：</p>
    <input type="text" data-keyboard="customKeyboard" style="width: 300px; height: 20px"><br>

    </body>

    </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 4246)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试html</title>
      <meta name="viewport">
  </head>
  <body>
  <div>
      <div id="bodyId">
          <embed id="nativeButton" type = "native/button" width="800" height="800" src="test?params1=1" style = "background-color:red"/>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 4392)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试</title>
      <meta name="viewport">
  </head>
  <body>
  <div>
      <div id="bodyId">
          <embed id="nativeButton" type ="native/button" width="800" height="800" style="background-color:red"/>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-events.md (line 4535)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>同层渲染测试</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <div>
      <div id="bodyId">
          <object id="nativeButton" type ="native/button" width="300" height="300" style="background-color:red">
            <param id="param-1" name="name-1" value="value1"/>
          </object>
      </div>
  </div>
  </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-WebController.md (line 648)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
      </head>
      <body>
          Hello world!
          <script type="text/javascript">
              function htmlTest() {
                  str = objName.test("test function")
                  console.info('objName.test result:'+ str)
              }
          </script>
      </body>
  </html>

  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web-WebController.md (line 715)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello world!
        <script type="text/javascript">
            function test() {
                console.info('Ark WebComponent')
                return "This value is from index.html"
            }
        </script>
    </body>
  </html>
  

// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web.md (line 210)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>

<script>
	function loadContent() {
	  var hash = window.location.hash;
	  var contentDiv = document.getElementById('content');

	  if (hash === '#home') {
		contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
	  } else {
		contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>';
	  }
	}

	// 加载界面
	window.addEventListener('load', loadContent);

	// 当hash变化时，更新界面
	window.addEventListener('hashchange', loadContent);
</script>
</body>
</html>


// From: zh-cn/application-dev/reference/apis-arkweb/arkts-basic-components-web.md (line 311)
// ==================================================
   <!-- index.html -->
   <!DOCTYPE html>
   <html>
       <body>
           <p>Hello World</p>
       </body>
   </html>
   

// From: zh-cn/application-dev/web/arkweb-ndk-page-data-channel.md (line 67)
// ==================================================
  <!-- entry/src/main/resources/rawfile/index.html -->
  <!-- index.html -->
  <!DOCTYPE html>
  <html lang="en-gb">
  <body>
  <h1>etsRunJavaScriptExt测试demo</h1>
  <h1 id="h1"></h1>
  <h3 id="msg">Receive string:</h3>
  <h3 id="msg2">Receive arraybuffer:</h3>

  </body>
  <script type="text/javascript">
  var h5Port;

  window.addEventListener('message', function (event) {
      if (event.data == 'init_web_messageport') {
          const port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
          if (port) {
              console.info("hwd In html got message");
              h5Port = port;
              port.onmessage = function (event) {
                  console.info("hwd In html got message");
                  // 2. 接收应用侧发送过来的消息.
                  var result = event.data;
                  var type_s = typeof (result)
                  switch (type_s) {
                      case "object":
                          if (result instanceof ArrayBuffer) {
                              type_s = "ArrayBuffer";
                              var view = new Uint8Array(result);
                              const decoder = new TextDecoder('utf-8');
                              result = decoder.decode(result);
                          } else if (result instanceof Error) {
                              type_s = "Error";
                          } else if (result instanceof Array) {
                              type_s = "Array";
                          }
                          break;
                      default:
                          break;
                  }
                  console.info("H5 recv type: " + type_s + "\nH5 recv result: " + result)
                  document.getElementById("msg").innerHTML = "recv type: " + type_s;
                  document.getElementById("msg2").innerHTML = "recv value: " + result;
              }
              h5Port.onmessageerror = (event) => {
                  console.error(`hwd In html Error receiving message: ${event}`);
              };
          }
      }
  })
  window.onerror = function(message, url, line, column, error) {
    console.info("JavaScript Error: " + message + " on line " + line + " in " + url);
    document.getElementById("h1").innerHTML = "执行函数失败"
  };

  // 3. 使用h5Port向应用侧发送消息。
  function postStringToApp() {
      if (h5Port) {
          h5Port.postMessage("send string from H5");
      } else {
          console.error("In html h5port is null, please init first");
      }
  }
  function postBufferToApp() {
      if (h5Port) {
          const str = "Hello, World!";
          const encoder = new TextEncoder();
          const uint8Array = encoder.encode(str);
          h5Port.postMessage(uint8Array.buffer);
      } else {
          console.error("In html h5port is null, please init first");
      }
  }

  function postJsonToApp() {
      if (h5Port) {
          var e = {"json": "json"};
          h5Port.postMessage(e);
      } else {
          console.error("In html h5port is null, please init first");
      }
  }

  function postArrayStringToApp() {
      if (h5Port) {
          h5Port.postMessage(["1", "2", "3"]);
      } else {
          console.error("In html h5port is null, please init first");
      }
  }

  function postNumberToApp() {
      if (h5Port) {
          h5Port.postMessage(123);
      } else {
          console.error("In html h5port is null, please init first");
      }
  }
  class MyClass {
    constructor() {
      // 构造器
      this.myProperty = 'Hello, World!';
    }

    myMethod() {
      // 实例方法
      console.info(this.myProperty);
    }

    static myStaticMethod() {
      // 静态方法
      console.info('This is a static method.');
    }
  }
  function postObjectToApp() {
      if (h5Port) {
          h5Port.postMessage(new MyClass());
      } else {
          console.error("In html h5port is null, please init first");
      }
  }

  </script>
  </html>
  

// From: zh-cn/application-dev/web/web-app-page-data-channel.md (line 112)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WebView Message Port Demo</title>
  </head>
  <body>
      <h1>WebView Message Port Demo</h1>
      <div>
          <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
          <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
      </div>
      <p class="output">display received message send from ets</p>
  </body>
  <script>
  var h5Port;
  var output = document.querySelector('.output');
  window.addEventListener('message', function (event) {
      if (event.data === '__init_port__') {
          if (event.ports[0] !== null) {
              h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
              h5Port.onmessage = function (event) {
                // 2. 接收ets侧发送过来的消息。
                var msg = 'Got message from ets:';
                var result = event.data;
                if (typeof(result) === 'string') {
                  console.info(`received string message from ets, string is: ${result}`);
                  msg = msg + result;
                } else if (typeof(result) === 'object') {
                  if (result instanceof ArrayBuffer) {
                    console.info(`received arraybuffer from ets, length is: ${result.byteLength}`);
                    msg = msg + 'length is ' + result.byteLength;
                  } else {
                    console.info('not support');
                  }
                } else {
                  console.info('not support');
                }
                output.innerHTML = msg;
              }
          }
      }
  })

  // 3. 使用h5Port向应用侧发送消息。
  function PostMsgToEts(data) {
      if (h5Port) {
        h5Port.postMessage(data);
      } else {
        console.error('h5Port is null, Please initialize first');
      }
  }
  </script>
  </html>
  

// From: zh-cn/application-dev/web/web-docking-softkeyboard.md (line 82)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>测试网页</title>
  </head>
  <body>
    <h1>DEMO</h1>
    <input type="text" id="input_a">
  </body>
</html>


// From: zh-cn/application-dev/web/web-geolocation-permission.md (line 36)
// ==================================================
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>位置信息</title>
  </head>
  <body>
      <p id="locationInfo">位置信息</p>
      <button onclick="getLocation()">获取位置</button>

      <script>
          var locationInfo=document.getElementById("locationInfo");
          function getLocation(){
              if (navigator.geolocation) {
                  // 访问设备地理位置
                  navigator.geolocation.getCurrentPosition(showPosition);
              }
          }
          function showPosition(position){
              locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
          }
      </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-getpage-height.md (line 97)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.addEventListener("load", function() {
        if (typeof jsbObj !== 'undefined') {
            jsbObj.notifyToGet();
        } else {
            console.info("jsbObj is error");
        }
    })
</script>
</body>
</html>


// From: zh-cn/application-dev/web/web-getpage-height.md (line 124)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="example.jpg" id="largeImage" alt="Large Image">
<script>
    var img = document.getElementById('largeImage');

    img.addEventListener('load', function() {
        if (typeof jsbObj !== 'undefined') {
            jsbObj.notifyToGet();
        } else {
            console.info("jsbObj is error");
        }
    });
</script>
</body>
</html>


// From: zh-cn/application-dev/web/web-getpage-height.md (line 154)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="example1.jpg" >
    <img src="example2.jpg" >
<script>
    function waitForImages() {
        const images = Array.from(document.images);
        const promises = images.map(img => {
            if (img.complete) return Promise.resolve();
            return new Promise(resolve => {
                img.onload = img.onerror = resolve;
            });
        });

        return Promise.all(promises).then(() => {
            if (typeof jsbObj !== 'undefined') {
                jsbObj.notifyToGet();
            } else {
                console.info("jsbObj is error");
            }
        })
    }
    document.addEventListener("DOMContentLoaded", waitForImages);
</script>
</body>
</html>


// From: zh-cn/application-dev/web/web-in-app-frontend-page-function-invoking.md (line 17)
// ==================================================
  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <button type="button" onclick="callArkTS()">Click Me!</button>
  <h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为黄色、调用runJavaScriptParam方法后字体为绿色、调用runJavaScriptCodePassed方法后字体为红色</h1>
  <script>
      // 有参函数。
      var param = "param: JavaScript Hello World!";
      function htmlTestParam(param) {
          document.getElementById('text').style.color = 'green';
          console.log(param);
      }
      // 无参函数。
      function htmlTest() {
          document.getElementById('text').style.color = 'yellow';
      }
      // 点击“Click Me！”按钮，触发前端页面callArkTS()函数执行JavaScript传递的代码。
      function callArkTS() {
          changeColor();
      }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-open-in-new-window.md (line 97)
// ==================================================
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width"/>
      <title>WindowEvent</title>
  </head>
  <body>
  <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
  <script type="text/javascript">
      function OpenNewWindow()
      {
          var txt = '打开的窗口';
          let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollbars=no");
          openedWindow.document.write("<p>" + "<br><br>" + txt + "</p>");
          openedWindow.focus();
      }
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-print.md (line 30)
// ==================================================
  <!DOCTYPE html>
  <html>

  <head>
      <meta charset="utf-8">
      <title>printTest</title>
      <style>
          @media print {
              h1 {
                  display: none;
              }
          }
      </style>
  </head>

  <body>
      <div>
          <h1><b>
                  <p style="text-align: center;">This is a test page for printing</p>
              </b>
              <hr color="#00cc00" width="95%">
          </h1>
          <button class="Button Button--outline" onclick="window.print();">Print</button>
          <p> content content content </p>
          <div id="printableTable">
              <table>
                  <thead>
                      <tr>
                          <td>Thing</td>
                          <td>Chairs</td>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>blue</td>
                      </tr>
                      <tr>
                          <td>2</td>
                          <td>green</td>
                      </tr>
                  </tbody>
              </table>
          </div>
          <p> content content content </p>
          <p> content content content </p>
      </div>
  </body>
  

// From: zh-cn/application-dev/web/web-print.md (line 84)
// ==================================================
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>iframe嵌套页面打印</title>
  </head>
  <body>
      <button id="printIframe">打印iframe嵌套页面</button>
      <iframe id="contentIframe" hidden></iframe>

      <script>
          document.getElementById("printIframe").addEventListener("click", () => {
              var ctIframe = document.getElementById("contentIframe");
              if(!ctIframe.contentWindow || !ctIframe.contentWindow.document) {
                console.error("iframe页面初始化失败");
                return;
              }
              var ctIframeDoc = ctIframe.contentWindow.document;
              ctIframeDoc.write("嵌套页面");
              ctIframeDoc.close();
              ctIframe.contentWindow.print();
          });
      </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-resource-interception-request-mgmt.md (line 21)
// ==================================================
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
  <!-- 页面资源请求 -->
  <a href="https://www.example.com/test.html">intercept test!</a>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-same-layer.md (line 148)
// ==================================================
     <!--HAP's src/main/resources/rawfile/text.html-->
     <!DOCTYPE html>
     <html>
     <head>
         <title>同层渲染html</title>
         <meta name="viewport">
     </head>

     <body style="background:white">

     <embed id = "input1" type="native/view" style="width: 100%; height: 100px; margin: 30px; margin-top: 600px"/>

     <embed id = "input2" type="native/view2" style="width: 100%; height: 100px; margin: 30px; margin-top: 50px"/>

     <embed id = "input3" type="native/view3" style="width: 100%; height: 100px; margin: 30px; margin-top: 50px"/>

     </body>
     </html>
     

// From: zh-cn/application-dev/web/web-same-layer.md (line 182)
// ==================================================
      <!--HAP's src/main/resources/rawfile/text.html-->
      <!DOCTYPE html>
      <html>
      <head>
          <title>同层渲染html</title>
          <meta name="viewport">
      </head>

      <body style="background:white">

      <object id = "input1" type="test/input" style="width: 100%; height: 100px; margin: 30px; margin-top: 600px"></object>

      <object id = "input2" type="test/input" style="width: 100%; height: 100px; margin: 30px; margin-top: 50px"></object>

      <object id = "input3" type="test/input" style="width: 100%; height: 100px; margin: 30px; margin-top: 50px"></object>

      </body>
      </html>
      

// From: zh-cn/application-dev/web/web-sensor.md (line 113)
// ==================================================
   <!DOCTYPE HTML>
   <html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
       <meta name="msapplication-tap-highlight" content="no" />
       <meta name="HandheldFriendly" content="true" />
       <meta name="MobileOptimized" content="320" />
       <title>运动和方向传感器</title>
       <style>
           body {
               font-family: Arial, sans-serif;
           }
       </style>
       <script type="text/javascript">
           // 访问设备的加速度计传感器，并获取其数据。
           function getAccelerometer() {
               var acc = new Accelerometer({frequency: 60});
               acc.addEventListener('activate', () => console.info('Ready to measure.'));
               acc.addEventListener('error', error => console.info('Error type: ' + error.type + ', error: ' + error.error ));
               acc.addEventListener('reading', () => {
                   console.info(`Accelerometer ${acc.timestamp}, ${acc.x}, ${acc.y}, ${acc.z}.`);
               });
               acc.start();
           }
   
           // 访问设备的陀螺仪传感器，并获取其数据。
           function getGyroscope() {
               var gyr = new Gyroscope({frequency: 60});
               gyr.addEventListener('activate', () => console.info('Ready to measure.'));
               gyr.addEventListener('error', error => console.info('Error type: ' + error.type + ', error: ' + error.error ));
               gyr.addEventListener('reading', () => {
                   console.info(`Gyroscope ${gyr.timestamp}, ${gyr.x}, ${gyr.y}, ${gyr.z}.`);
               });
               gyr.start();
           }
   
           // 访问设备的方向传感器，并获取其数据。
           function getAbsoluteOrientationSensor() {
               var aos = new AbsoluteOrientationSensor({frequency: 60});
               aos.addEventListener('activate', () => console.info('Ready to measure.'));
               aos.addEventListener('error', error => console.info('Error type: ' + error.type + ', error: ' + error.error ));
               aos.addEventListener('reading', () => {
                   console.info(`AbsoluteOrientationSensor data: ${aos.timestamp}, ${aos.quaternion}`);
               });
               aos.start();
           }
   
           // 监听设备的运动事件，并执行相应的处理逻辑。
           function listenDeviceMotionEvent() {
               removeDeviceMotionEvent();
               if ('DeviceMotionEvent' in window) {
                   window.addEventListener('devicemotion', handleMotionEvent, false);
               } else {
                 console.info('不支持DeviceMotionEvent');
               }
           }
   
           // 移除之前添加的设备运动事件监听器。
           function removeDeviceMotionEvent() {
               if ('DeviceMotionEvent' in window) {
                 window.removeEventListener('devicemotion', handleMotionEvent, false);
               } else {
                 console.info('不支持DeviceMotionEvent');
               }
           }
   
           // 处理运动事件。
           function handleMotionEvent(event) {
               const x = event.accelerationIncludingGravity.x;
               const y = event.accelerationIncludingGravity.y;
               const z = event.accelerationIncludingGravity.z;
               console.info(`DeviceMotionEvent data: ${event.timeStamp}, ${x}, ${y}, ${z}`);
           }
   
           // 监听设备方向的变化，并执行相应的处理逻辑。
           function listenDeviceOrientationEvent() {
               removeDeviceOrientationEvent();
               if ('DeviceOrientationEvent' in window) {
                   window.addEventListener('deviceorientation', handleOrientationEvent, false);
               } else {
                   console.info('不支持DeviceOrientationEvent');
               }
           }
   
           // 移除之前添加的设备方向事件监听器。
           function removeDeviceOrientationEvent() {
               if ('DeviceOrientationEvent' in window) {
                 window.removeEventListener('deviceorientation', handleOrientationEvent, false);
               } else {
                 console.info('不支持DeviceOrientationEvent');
               }
           }
   
           // 监听设备方向的变化，并执行相应的处理逻辑。
           function listenDeviceOrientationEvent2() {
               removeDeviceOrientationEvent2();
               if ('DeviceOrientationEvent' in window) {
                   window.addEventListener('deviceorientationabsolute', handleOrientationEvent, false);
               } else {
                   console.info('不支持DeviceOrientationEvent');
               }
           }
   
           // 移除之前添加的设备方向事件监听器。
           function removeDeviceOrientationEvent2() {
               if ('DeviceOrientationEvent' in window) {
                 window.removeEventListener('deviceorientationabsolute', handleOrientationEvent, false);
               } else {
                 console.info('不支持DeviceOrientationEvent');
               }
           }
   
           // 处理方向事件。
           function handleOrientationEvent(event) {
               console.info(`DeviceOrientationEvent data: ${event.timeStamp}, ${event.absolute}, ${event.alpha}, ${event.beta}, ${event.gamma}`);
           }
       </script>
   </head>
   <body>
   <div id="dcontent" class="dcontent">
       <h3>运动和方向:</h3>
       <ul class="dlist">
           <li><button type="button" onclick="getAccelerometer()">加速度</button></li>
           <li><button type="button" onclick="getGyroscope()">陀螺仪</button></li>
           <li><button type="button" onclick="getAbsoluteOrientationSensor()">设备方向(绝对定位)</button></li>
           <li><button type="button" onclick="listenDeviceMotionEvent()">设备运动事件</button></li>
           <li><button type="button" onclick="listenDeviceOrientationEvent()">设备方向事件</button></li>
           <li><button type="button" onclick="listenDeviceOrientationEvent2()">设备方向事件(绝对定位)</button></li>
       </ul>
   </div>
   </body>
   </html>
   

// From: zh-cn/application-dev/web/web-set-dark-mode.md (line 22)
// ==================================================
  /* 使用方式1：使用meta标签全局设置 */
  <meta name="color-scheme" content="light"> /* 只支持浅色模式 */

  /* 使用方式2：使用style全局设置 */
  :root {
    color-scheme: light dark; /* 支持浅色和深色模式，跟随系统切换 */
  }

  /* 使用方式3：使用style针对特定元素设置 */
  div {
    color-scheme: light; /* 只支持浅色模式 */
  }
  

// From: zh-cn/application-dev/web/web-set-dark-mode.md (line 39)
// ==================================================
  <!-- color-scheme.html -->
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="color-scheme" content="light dark">
  </head>
  <body>
    <h1>Example page</h1>
    <input name="input1" type="text" placeholder="please enter text">
    <br><br>
    <input name="input2" type="text" placeholder="please enter text" style="background-color: Lightgray;">
    <br><br>
    <progress value="50" max="100"></progress>
    <br><br>
    <input type="checkbox">
    <input type="checkbox" checked>
    <br><br>
    <button>submit</button>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web-set-dark-mode.md (line 69)
// ==================================================
  <style>
    /* 默认样式 */
    body { background-color: White; }

    /* 浅色样式，Web关闭深色模式时覆盖默认样式 */
    @media (prefers-color-scheme: light) {
      body { background-color: Gray; }
    }

    /* 深色样式，Web开启深色模式时覆盖默认样式 */
    @media (prefers-color-scheme: dark) {
      body { background-color: Black; }
    }
  </style>
  

// From: zh-cn/application-dev/web/web-set-dark-mode.md (line 90)
// ==================================================
  <style>
    @media (prefers-color-scheme: dark) {
      body { background-color: Gray; color: LightYellow; }
      input { background-color: Lightgray; }
    }
  </style>
  

// From: zh-cn/application-dev/web/web_menu.md (line 90)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
    <head>
        <title>测试网页</title>
    </head>
    <body>
      <h1>editMenuOptions Demo</h1>
      <span>edit menu options</span>
    </body>
  </html>
  

// From: zh-cn/application-dev/web/web_menu.md (line 233)
// ==================================================
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<body>
  <h1>onContextMenuShow</h1>
  <a href="http://www.example.com" style="font-size:27px">超链接www.example.com</a>
  <!--example.png为html同目录下图片-->
  <div><img src="example.png"></div>
  <p>选中文字鼠标右键弹出菜单</p>
</body>
</html>


// From: zh-cn/application-dev/web/web_menu.md (line 332)
// ==================================================
<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
      <title>测试网页</title>
  </head>
  <body>
    <h1>bindSelectionMenu Demo</h1>
    <!--img.png为html同目录下图片-->
    <img src="./img.png" >
  </body>
</html>


// From: zh-cn/application-dev/web/web_menu.md (line 520)
// ==================================================
<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合信息页面</title>
</head>
<body>
<div>
    <h1>综合信息与联系详情</h1>
    <section>
        <a href="https://www.example.com">EXAMPLE</a>
        <br>
        <a href="https://www.example1.com/">EXAMPLE1</a>
    </section>
</div>
<footer>
    <p>请注意，以上提供的所有网址仅供演示之用。</p>
</footer>
</body>
</html>


// From: zh-cn/application-dev/web/web_menu.md (line 658)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>SavePicture</title>
  </head>
  <body>
  <h1>SavePicture</h1>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--startIcon.png为html同目录下图片-->
  <img src="./startIcon.png">
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web_menu.md (line 726)
// ==================================================
  <!DOCTYPE html>
  <html>
  <head>
      <title>Test Get Select</title>
      <style>
          body {
            margin: 40px;
            background-color: #f4f4f4;
          }
          .edit-container {
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin: auto;
          }
          textarea {
            width: 100%;
            height: 400px;
            font-size: 16px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
          }
      </style>
  </head>
  <body>
  <div class="edit-container">
      <textarea placeholder="Enter the text here and select it by long pressing."></textarea>
  </div>
  <script>
      document.addEventListener('selectionchange', () => {
        var selection = window.getSelection();
        if(selection.rangeCount > 0) {
          var selectedText = selection.toString();
          selectObjName.setSelectText(selectedText);
        }
      })
  </script>
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web_menu.md (line 894)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
      <title>test QR code</title>
  </head>
  <body>
  <h1>Long press and click to scan the QR code</h1>
  <!--img.png为二维码图片-->
  <img src="img.png" >
  </body>
  </html>
  

// From: zh-cn/application-dev/web/web_menu.md (line 943)
// ==================================================
  <!--index.html-->
  <!DOCTYPE html>
  <html>
    <head>
        <title>测试网页</title>
    </head>
    <body>
      <h1>editMenuOptions Demo</h1>
      <span>edit menu options</span>
    </body>
  </html>
  

